<template>
  <div class="subpage">
    <my-head title="注册" :back="true" :login="true">
      <van-icon name="revoke" size="32" class="icon" />
    </my-head>
    <van-form @submit="onSubmit" @failed="onFail" class="form">
      <van-field
        v-model="form.username"
        clearable
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请输入用户名' }]"
      />
      <van-field
        v-model="form.phone"
        clearable
        name="phone"
        label="手机号码"
        placeholder="请输入手机号码"
       :rules="[
        { required: true, message: '请输入手机号' },
        { pattern:reg.phone,message:'请输入正确的手机号'}
      ]"
      />
      <van-field
        v-model="form.email"
        clearable
        name="email"
        label="电子邮箱"
        placeholder="请输入电子邮箱"
        :rules="[
        { required: true, message: '请输入电子邮箱' },
        { pattern:reg.email,message:'请输入正确的电子邮箱'}
        ]"
      />
      <van-field
        v-model="form.password"
        :type="type"
        :right-icon="type == 'password' ? 'closed-eye' : 'eye-o'"
        name="password"
        label="密码"
        placeholder="请输入密码"
        @click-right-icon="changetype"
        :rules="[
        { required: true, message: '请输入密码' },
        { pattern:reg.pwd,message:'请输入6-16的数字和字母的组合'}
        ]"
        @blur="checkDbPass"
      />
      <van-field
        v-model="form.dbpassword"
        :type="type1"
        :right-icon="type1 == 'password' ? 'closed-eye' : 'eye-o'"
        name="dbpassword"
        label="确认密码"
        placeholder="请确认密码"
        @click-right-icon="changetype1"
        :rules="[
        { required: true, message: '请输入确认密码' },
        {pattern:reg.pwd,message:'请输入6-16的数字和字符的组合密码'},
        {validator:checkPassEqual,message:'2次密码不一致'}

      ]"
      />
      <div style="margin: 16px" class="links">
        <p>
          <router-link class="color1" :to="{ name: 'login' }"
            >已有账号，前往登录</router-link
          >
        </p>
        <p>
          <router-link class="color2" :to="{ name: 'forgetpass' }"
            >忘记密码</router-link
          >
        </p>
      </div>
      <div style="margin: 36px 16px">
        <van-button block type="warning" native-type="submit"
          >注册账号</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {},
      type: "password",
      type1: "password",
    };
  },
  mounted () {
    // this.$axios.get("http://localhost:2110/test")
    // .then(res=>{
    //   console.log(res)
    // })
    // this.$ajax.test({id:1}).then(res=>{
    //   console.log(res)
    // })
    this.getTest()
  },
  methods: {
    // async +await 必须配合一起使用
   async getTest(){
     let res=await this.$ajax.test({id:2110})
   },
    onSubmit(value) {
      // 先判断是否已经注册
      // 没有才能注册
      this.$ajax.findUser({
        phone:value.phone,
        username:value.phone
      })
      .then(res=>{
        if(res.length>0){
          //已经注册
          this.$toast('用户名或手机号码被占用')
        }else{
          this.$ajax.addUser(value).then(res=>{
            this.$notify({ type: 'success', message: '注册成功' });
            this.$nextTick(()=>{
              this.$router.push({name:'login',query:{username:value.username}})
            })
          })
        }
      })
    },
    changetype() {
      this.type = this.type == "password" ? "text" : "password";
    },
    changetype1() {
      this.type1 = this.type1 == "password" ? "text" : "password";
    },
    checkPassEqual(){
       if(this.reg.pwd.test(this.form.password)){
          return this.form.password  == this.form.dbpassword
       }
    },
    checkDbPass(){
      // 校验二次密码
      if(this.reg.pwd.test(this.form.dbpassword)){
        this.$refs.form.validate("dbpassword")
      } 
    },
      onFail(){
      this.$toast('输入错误,请重新输入');
    }
  },
};
</script>
<style lang="scss" scoped>
.form {
  margin-top: 20px;
  .links {
    display: flex;
    justify-content: space-between;
  }
  .color1 {
    color: #0f0 !important;
  }
  .color2 {
    color: red !important;
  }
}
</style>